/**
* @description: 计划工单 ==> 计划工单监控 ==> 计划工单进度
**/
<template>
<view class="task-monitor-main">
  <nav-bar class="header" back title="计划工单详情" @goBack="goBack"/>
  <view class="main-container">
    <!--基本信息-->
    <plateTitle title="基本信息" class="plate-title-1"/>
    <view class="base-info-container">
      <van-cell-group>
        <van-cell v-for="(item,index) in baseInfoData" :key="index" :title="item.title" :value="item.value" />
      </van-cell-group>
    </view>
    
    <!--巡视进度-->
    <plateTitle title="巡视进度" class="plate-title-2" >
      <span class="plate-title-right" :style="{color: statusColor(taskState)}" @click="taskJump">
        {{ taskStateName }}（{{ taskProgressLeft }}/{{taskProgressRight}}）
        <van-icon name="arrow" />
      </span>
    </plateTitle>
      <!--  3 已完工  -->
      <view class="finish" v-if="taskState === '99'" v-for="(ite,index) in progessList" :key="index">
        <view class="progesss-top">
          <view class="progess-left">
            <img src="../../../../static/img/equipment.png" alt="" v-if="ite.DET_TYPE_NAME === '通信设备'">
            <img src="../../../../static/img/opticalCable.png" alt="" v-if="ite.DET_TYPE_NAME === '通信光缆'">
            <img src="../../../../static/img/powerSupply.png" alt="" v-if="ite.DET_TYPE_NAME === '通信电源'">
            <text class="progess-title">{{ ite.DET_TYPE_NAME }}</text>
          </view>
          <view class="progess-right">{{ite.JD}} ({{ite.YWC }}/{{ite.TOTAL}})</view>
        </view>
        <hr class="progess-hr">
        <view class="progesss-bottom xsry">
          <text class="progress-title">巡视人员：</text>
          <text class="progress-main">{{ite.XSRY}}</text>
        </view>
        <view class="progesss-bottom">
          <text class="progress-title">巡视设备数：</text>
          <text class="progress-main">{{ite.TOTAL}}</text>
          <text class="progress-title ml">异动设备数：</text>
          <text class="progress-main colorNum">{{ite.BCZ + ite.XZ + ite.GX}}</text>
        </view>
        <view class="task-bottom">
          <text class="task-box add-box">新增：{{ite.XZ}}</text>
          <text class="task-box update-box">更新：{{ite.GX}}</text>
          <text class="task-box consistent-box">一致：{{ite.YZ}}</text>
          <text class="task-box nonentity-box">不存在：{{ite.BCZ}}</text>
        </view>
      </view>
      <!-- 1 未执行/  2  执行中  -->
      <view class="noExecute" v-if="taskState === '2' || taskState === '3'" v-for="(item,index) in progessList" :key="index">
        <view class="progesss-top">
          <view class="progess-left">
            <img src="../../../../static/img/equipment.png" alt="" v-if="item.DET_TYPE_NAME === '通信设备'">
            <img src="../../../../static/img/opticalCable.png" alt="" v-if="item.DET_TYPE_NAME === '通信光缆'">
            <img src="../../../../static/img/powerSupply.png" alt="" v-if="item.DET_TYPE_NAME === '通信电源'">
            <text class="progess-title">{{ item.DET_TYPE_NAME }}</text>
          </view>
          <view class="progess-right" :style="{color: item.JD === '未完成' ? '#FF4355' : '#41DC83'}">{{item.JD}} ({{item.YWC }}/{{item.TOTAL}})</view>
        </view>
        <hr class="progess-hr">
        <view class="progesss-bottom">
          <text class="progress-title">巡视人员：</text>
          <text class="progress-main">{{item.XSRY}}</text>
        </view>
      </view>
  </view>
</view>
</template>

<script>
import navBar from "../../../../components/common/nav-bar";
import plateTitle from "../../../../components/business/plateTitle";
import moment from 'moment'
import {mapGetters} from "vuex";

export default {
  components: { navBar, plateTitle },
  name: "taskMonitor",
  data() {
    return {
      baseInfoData: [],
      taskProgressLeft: 0,
      taskProgressRight: 0,
      statusColor: (taskState) => {
        if(taskState === "99") return "#41DC83";
        if(taskState === "2") return "#FF4355";
        if(taskState === "3") return "#FFAD0E";
      },
      progessList:[],
      taskState:'', //携带到巡视设备列表 做返回参数
      taskStateName:'', //携带到巡视设备列表 做返回参数
      taskId:'', //携带到巡视设备列表 做返回参数
      neId:'',
    }
  },
  onLoad(options) {
    this.taskState = options.taskState
    this.taskId = options.objId
    this.taskStateName = options.taskStateName
    this.getInFo()
  },
  computed:{
    ...mapGetters(['userData', 'roleAuth'])
  },
  methods: {
    // 获取基本信息
    getInFo() {
        this.$api.getTaskDetails({task_state:this.taskState,task_id:this.taskId}).then(res => {
          this.neId = res.data.taskMsg.OBJ_ID
          //计划开工时间
          const JHKGKSSJ = res.data.taskMsg.JHKSSJ?moment(res.data.taskMsg.JHKSSJ).format('YYYY-MM-DD HH:mm'):''
          const JHKGJSSJ = res.data.taskMsg.JHJSSJ?moment(res.data.taskMsg.JHJSSJ).format('YYYY-MM-DD HH:mm'):''
          const JHKGSJ = JHKGKSSJ + '～' + JHKGJSSJ
          this.baseInfoData = [
            {
              title: "工单名称",
              value: res.data.taskMsg.NAME
            },
            {
              title: "巡视站点名称",
              value: res.data.taskMsg.TASK_SITE_NAME
            },
            {
              title: "计划开工时间",
              value: JHKGSJ
            },
            {
              title: "负责人",
              value: res.data.taskMsg.FZR
            },
            {
              title: "计划巡视时间",
              value: moment(res.data.taskMsg.JHXSKSSJ).format('YYYY-MM-DD HH:mm') +'～'+ moment(res.data.taskMsg.JHXSJSSJ).format('YYYY-MM-DD HH:mm')
            },
            {
              title: "巡视负责人",
              value: res.data.taskMsg.XSFZR
            },
            {
              title: "备注",
              value: res.data.taskMsg.REMARK
            },
          ]
          this.progessList = res.data.task_details.map(item => {
            this.taskProgressLeft += item.YWC
            this.taskProgressRight += item.TOTAL
            return item
          })
        })
    },
    goBack() {
      if(['TOUR_GROUP'].includes(this.roleAuth)) {
        uni.navigateTo({
          url: '/pages/workBench/tourTask/taskMonitor/patrolTaskMonitor'
        })
      }else {
        uni.navigateTo({
          url: '/pages/workBench/taskMonitor/taskMonitor'
        })
      }

    },
    taskJump() {
      // 跳转巡视设备列表
      uni.navigateTo({
        url: `/pages/workBench/tourTask/taskMonitor/tourEquipment/patrolEquipment?id=${this.neId}&taskState=${this.taskState}&objId=${this.taskId}&taskStateName=${this.taskStateName}`
      })
    }
  }
};
</script>

<style scoped lang="scss">
.task-monitor-main {
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  
  .main-container {
    min-height: calc(100vh - #{px2vh(283)});
    padding: px2vh(30) px2vw(30) px2vh(90) px2vw(30);
    background-color: #F8F8F8;
    /deep/.van-field__label, 
    /deep/.van-field__control:read-only, 
    /deep/.van-field__body .van-field__control,
    /deep/.van-cell-group .van-cell
    {
      font-size: px2vw(42);
    }
    /deep/.van-field__label {
      width: auto;
    }
  
    .plate-title-1 {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }
  
    .base-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;
      /deep/.van-cell__title {
        color: #666;
      }
      /deep/.van-cell__value {
        color: #333;
      }

    }
  
    .plate-title-2 {
      margin-top: px2vh(60);
      margin-bottom: px2vh(27);

      .plate-title-right {
        line-height: px2vh(54);
        font-size: px2vw(40);
        font-weight: bold;
        
        .van-icon {
          vertical-align: middle;
          color: #9A9A9A;
        }
      }
    }
    .noExecute {
      width: px2vw(1020);
      //height: px2vh(313);
      background: #fff;
      margin-bottom: px2vh(30);
      padding-bottom: px2vh(30);
      border-radius: 10px;
      .progesss-top {
        width: px2vw(920);
        height: px2vh(172);
        margin: 0 px2vw(50);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .progess-left {
          display: flex;
          align-items: center;
          img {
            width: px2vw(68);
            height: px2vw(68);
            //margin-top: px2vh(55);
            //float: left;
          }
  
          .progess-title {
            color: #666;
            //float: left;
            font-size: px2vw(42);
            margin-left: px2vw(20);
            //margin-top: px2vh(58);
            //line-height: px2vh(62);
          }
        }
        .progess-right {
          //width: px2vw(300);
          font-size: px2vw(42);
          //line-height: px2vh(62);
          //margin-top: px2vh(58);
          //float: right;
        }
        .processColor {
          color: #FF4355;
        }
        .processColor2 {
          color: #FFAD0E;
        }
      }
      .progess-hr {
        width: px2vw(920);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
      }
      .progesss-bottom {
        width: px2vw(920);
        margin-left: px2vw(50);
        //height: px2vh(138);
        font-size: px2vw(36);
        display: flex;
        padding: px2vh(30) 0 0;
        .progress-title {
          width: px2vw(190);
          display: inline-block;
          //margin-top: px2vh(58);
          color: #666;
        }
        .progress-main {
          flex: 1;
          display: inline-block;
          //margin-top: px2vh(58);
          color: #333;
        }
      }
    }
    .finish {
      width: px2vw(1020);
      //height: px2vh(500);
      background: #fff;
      margin-bottom: px2vh(30);
      padding-bottom: px2vh(30);
      border-radius: 10px;
      .progesss-top {
        width: px2vw(920);
        height: px2vh(172);
        margin-left: px2vw(50);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .progess-left {
          display: flex;
          align-items: center;
          img {
            width: px2vw(68);
            height: px2vw(68);
            //margin-top: px2vh(55);
            //float: left;
          }
  
          .progess-title {
            color: #666;
            //float: left;
            font-size: px2vw(42);
            margin-left: px2vw(20);
            //margin-top: px2vh(58);
            //line-height: px2vh(62);
          }
        }
        .progess-right {
          //width: px2vw(300);
          font-size: px2vw(42);
          //line-height: px2vh(62);
          //margin-top: px2vh(58);
          //float: right;
          color: #41DC83;
        }
        .processColor {
          color: #FF4355;
        }
        .processColor2 {
          color: #FFAD0E;
        }
      }
      .progess-hr {
        width: px2vw(920);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
      }
      .progesss-bottom {
        width: px2vw(920);
        margin-left: px2vw(50);
        font-size: px2vw(36);
        
        .progress-title {
          display: inline-block;
          margin-top: px2vh(44);
          color: #666;
        }
        .progress-main {
          display: inline-block;
          margin-top: px2vh(44);
          color: #333;
        }
        .ml {
          margin-left: px2vw(217);
        }
        .colorNum {
          color: #FF4355;
        }
      }
      .progesss-bottom.xsry {
        display: flex;
        .progress-title {
          width: px2vw(190);
        }
        .progress-main {
          flex: 1;
        }
        .ml {
          margin-left: px2vw(217);
        }
        .colorNum {
          color: #FF4355;
        }
      }
      .task-bottom {
        width: px2vw(920);
        height: px2vh(66);
        margin-left: px2vw(50);
        margin-top: px2vh(40);
        font-size: px2vw(36);
        .task-box {
          display: inline-block;
          width: px2vw(206);
          height: px2vh(60);
          line-height: px2vh(62);
          font-size: px2vw(32);
          text-align: center;
        }
        .add-box {
          color: #41DC83;
          background: rgba(65,220,131, 0.1);
        }
        .update-box {
          color: #FFAD0E;
          margin-left: px2vw(32);
          background: rgba(255,180,0, 0.1);
        }
        .consistent-box {
          color: #417ADC;
          margin-left: px2vw(32);
          background: rgba(65,122,220, 0.1);
        }
        .nonentity-box {
          color: #FF7070;
          margin-left: px2vw(32);
          background: rgba(255,112,112, 0.1);
        }
      }
    }
  }
}
</style>